<template>
  <div class="test-custom-content">
    <label>請輸入資料</label>
    <input v-model="v" type="text" />
    <div v-if="errMsg" class="error-msg">{{ errMsg }}</div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useConfirmData } from '@/compositions/dialog/confirm-data'

const v = ref('')
const errMsg = ref('')

useConfirmData(validator)

function validator() {
  // 驗證資料沒通過回傳 fasle
  if (v.value === '') {
    errMsg.value = '不能為空哦'
    return false
  }

  // 驗證資料通過打包成想回傳的樣子回傳
  const data = { input: v.value }

  // 重置資料內容
  reset()

  return data
}

function reset() {
  v.value = ''
  errMsg.value = ''
}
</script>

<style lang="scss" scoped>
.test-custom-content {
  input {
    width: 100%;
    padding: 0.5rem;
    margin: 0.5rem 0;
    border: 1px solid #e0e0e0;
  }

  .error-msg {
    color: red;
  }
}
</style>
